<template>
  <div class="main-content pd16">

    <!--搜索栏-->
    <el-form class="search-form" ref="searchFormRef" :model="searchForm" :inline="true" label-width="70px">

      <el-form-item label="会议ID" prop="nickName" label-width="60px">
        <el-input v-model="searchForm.nickName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="会议号" prop="nickName" label-width="60px">
        <el-input v-model="searchForm.nickName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="参会人账号" prop="nickName" label-width="100px">
        <el-input v-model="searchForm.nickName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="参会人姓名" prop="nickName" label-width="100px">
        <el-input v-model="searchForm.nickName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="参会人手机号" prop="nickName" label-width="100px">
        <el-input v-model="searchForm.nickName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="会议状态" prop="nickName" label-width="70px">
        <el-input v-model="searchForm.nickName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="状态" prop="isDisable" label-width="40px">
        <el-select v-model="searchForm.isDisable" placeholder="请选择" clearable style="width: 100px">
          <el-option v-for="dict in enu_common_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证名" prop="idCardName" label-width="70px">
        <el-input v-model="searchForm.idCardName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCardNumber" label-width="70px">
        <el-input v-model="searchForm.idCardNumber" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
        <el-button icon="Refresh" @click="resetSearch">重置</el-button>
      </el-form-item>

    </el-form>

    <!--按钮组-->
    <div class="fx mgb12">
      <el-button type="primary" plain size="small" icon="Plus" @click="openAdd">新增用户</el-button>
      <el-button type="danger" plain size="small" icon="Delete" @click="deleteBatch">批量删除</el-button>
      <el-button plain size="small" icon="Menu" @click="resetPasswordBatch">批量重置密码</el-button>
    </div>

    <!--表格-->
    <el-table border highlight-current-row row-key="id" v-loading="option.loading" :data="option.tableData"
              @selection-change="selectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="会议ID" prop="id" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="会议号" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="参会人账号" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="参会人姓名" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="参会人手机号" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="会议状态" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="进入时间" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="离开时间" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="参会时长" prop="account" :show-overflow-tooltip="true" width="170"></el-table-column>
      <el-table-column label="状态" align="center" prop="isDisable" :show-overflow-tooltip="true" width="70">
        <template #default="scope">
          <dict-tag :options="enu_common_status" :value="scope.row.isDisable"></dict-tag>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="fx_end">
      <el-pagination
          class="mgt8"
          small
          background
          :total="option.totalRow"
          :page-sizes="option.pageSizes"
          v-model:current-page="searchForm.pageNumber"
          v-model:page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="searchData"
          @current-change="searchData"
      />
    </div>

    <!--Dialog-->
    <el-dialog :title="option.dialogTitle" v-model="option.openDialog" width="680px" :close-on-click-modal="false"
               draggable append-to-body destroy-on-close>

      <el-form ref="formDataRef" size="default" :model="formData" :rules="formRules" label-width="100px">

        <el-form-item label="账号" prop="account">
          <el-input :disabled="option.dialogType==='edit'" v-model="formData.account" placeholder="请输入"
                    style="width: 400px"/>
        </el-form-item>

        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="formData.nickName" placeholder="请输入" style="width: 400px"/>
        </el-form-item>

        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="formData.roleIds" multiple collapse-tags collapse-tags-tooltip
                     :max-collapse-tags="4" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in option.allRole" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="手机号" prop="phoneMobile">
          <el-input v-model="formData.phoneMobile" placeholder="请输入" style="width: 400px"/>
        </el-form-item>

        <el-form-item label="当前状态" prop="isDisable">
          <el-radio-group v-model="formData.isDisable" style="width: 400px">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="身份证姓名" prop="idCardName">
          <el-input v-model="formData.idCardName" placeholder="请输入" style="width: 400px"/>
        </el-form-item>

        <el-form-item label="身份证号" prop="idCardNumber">
          <el-input v-model="formData.idCardNumber" placeholder="请输入" style="width: 400px"/>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
              v-model="formData.remark"
              maxlength="500"
              placeholder="请输入"
              show-word-limit
              :rows="2"
              style="width: 400px"
              type="textarea"
          />
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button @click="()=>{option.openDialog=false}">取 消</el-button>
        <el-button v-if="option.dialogType==='add'" type="primary" @click="submitAdd">确 定</el-button>
        <el-button v-if="option.dialogType==='edit'" type="primary" @click="submitEdit">保 存</el-button>
      </template>

    </el-dialog>


  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {allMyCreateRole, pageUser} from "@/common/api/system";
import $modal from "@/common/utils/modal";
import {copyNew} from "@/common/utils/kit";
import {Valid} from "@/common/utils/valid";
import {encrypt} from "@/common/utils/jsencrypt";
import DictTag from "@/common/component/DictTag.vue";
import {asDict} from "@/common/api/common";
import {demoApiFormData} from "@/common/api/demo";

const {proxy} = getCurrentInstance();
const {enu_common_status, enu_user_mt_auth} = asDict("enu_common_status", "enu_user_mt_auth");

let optionKey = {
  loading: false,
  dialogType: "",
  dialogTitle: "",
  openDialog: false,
  tableData: [],
  selectIds: [],
  selectNames: [],
  pageSizes: [1, 10, 20, 50, 100],
  totalRow: 0,
  nowRoleId: 0,
  defaultChecked: [],
  allRole: [],
}
let formKey = {
  id: "",
  name: "",
  sort: 100,
  res: "",
  resExclude: "",
  //是否已禁用，0=正常，1=已禁用，默认为0
  isDisable: "0",
  remark: "",
  phoneMobile: "",
  idCardName: "",
  idCardNumber: "",
  roleIds: [],
}
let searchKey = {
  pageNumber: 1,
  pageSize: 10,
  nickName: "",
  account: "",
  phoneMobile: "",
  isDisable: "",
  idCardName: "",
  idCardNumber: "",
}

const formRules = ref({
  roleIds: [{required: true, message: "不能为空", trigger: "blur"}],
  type: [{required: true, message: "不能为空", trigger: "change"}],
  sort: [{required: true, message: "不能为空", trigger: "blur"}],
  name: [{required: true, message: "不能为空", trigger: "blur"}],
  account: [{required: true, message: "不能为空", trigger: "blur"}],
  nickName: [{required: true, message: "不能为空", trigger: "blur"}],
  phoneMobile: [{required: true, message: "不能为空", trigger: "blur"}],
});

const searchForm = ref(searchKey)
const formData = ref(formKey);
const option = ref(optionKey);

function resetForm() {
  formData.value = copyNew(formKey);
}

function resetSearch() {
  proxy.$refs["searchFormRef"].resetFields();
}

//页面加载完成回调
onMounted(() => {

  searchData()

  allMyCreateRole().then(res => {
    option.value.allRole = res.data
  })

})

function selectionChange(rows) {
  option.value.selectIds = rows.map(item => item.id);
  option.value.selectNames = rows.map(item => item.account);
}

//搜索数据
function searchData() {
  option.value.loading = true;
  pageUser(searchForm.value).then(res => {
    let {totalRow, records, pageNumber, pageSize} = res.data;
    option.value.loading = false;
    option.value.totalRow = totalRow * 1
    option.value.tableData = records
    searchForm.value.pageNumber = pageNumber
    searchForm.value.pageSize = pageSize
  })
}

function openAdd() {
  resetForm()
  option.value.dialogTitle = "新增用户";
  option.value.openDialog = true;
  option.value.dialogType = "add";
}

function openEdit(row) {
  //console.log(row)
  option.value.dialogTitle = "编辑用户信息";
  option.value.openDialog = true;
  option.value.dialogType = "edit";
  formData.value = copyNew(row);
  formData.value.roleIds = formData.value.roleIds ? formData.value.roleIds.split(",") : []
}

function submitAdd() {
  proxy.$refs["formDataRef"].validate(valid => {

    if (valid) {
      demoApiFormData(formData.value).then(res => {
        if (res.success) {
          //console.log(res)
          $modal.success();
          option.value.openDialog = false;
          searchData()
        }
      })
    }

  });
}

function submitEdit() {
  proxy.$refs["formDataRef"].validate(valid => {

    if (valid) {
      demoApiFormData(formData.value).then(res => {
        if (res.success) {
          //console.log(res)
          $modal.success();
          option.value.openDialog = false;
          searchData()
        }
      })
    }

  });
}

function deleteBatch() {
  if (option.value.selectIds.length === 0) {
    $modal.warning("请至少选择一条数据");
    return;
  }

  //console.log(ids)
  let content = `正在删除名称为【 ${option.value.selectNames.join("、")}】 的数据项，是否确定删除？ `
  $modal.confirmWarning(content)
      .then(async () => {
        demoApiFormData({ids: option.value.selectIds.join(",")}).then(res => {
          if (res.success) {
            $modal.success();
            searchData()
          }
        })
      }).catch(() => $modal.cancel());
}

function resetPasswordBatch() {
  if (option.value.selectIds.length === 0) {
    $modal.warning("请至少选择一条数据");
    return;
  }
  let content = `当前修改用户：【 ${option.value.selectNames.join("、")}】  `
  $modal.prompt(content, "批量重置密码", Valid.password.pattern, Valid.password.msg)
      .then(({value}) => {
        let param = {
          newPassword: value,
          expireTime: new Date().getTime() + 10000,
          userIds: option.value.selectIds.join(",")
        }

        //console.log(param)
        // 传输加密
        let paramStr = encrypt(JSON.stringify(param))
        //console.log(paramStr)
        demoApiFormData({paramStr: paramStr}).then(res => {
          if (res.success) {
            $modal.success();
          }
        })
      })
      .catch(() => {
      })
}

</script>

<style scoped lang="less">

</style>